<template>
  <div v-loading="loading">
    <create-sections
      :title="title">
      <wk-base-detail-section
        v-for="(item, index) in documentFields"
        :dropdown-items="dropdownItems"
        :key="index"
        :list="item"
        @command-select="commandSelect($event, index)"
      />
      <div v-if="status == 1" slot="header" class="wk-base-detail__more" style="text-align: right; width: 100%;">
        <div slot="more">
          <el-button type="text" @click="commandSelect('add')">新增</el-button>
        </div>
      </div>
    </create-sections>

    <form-add-dialog
      ref="formAdddialog"
      :title="formAddTitle"
      :form.sync="formAddForm"
      :rules="formAddRules"
      :fields="formAddFields"
      :visible.sync="formAddDialogShow"
      @pass="uploaddocumentList"
    />
  </div>
</template>

<script>
import {
  reportDocumentListQueryAPI,
  reportDocumentAddOrUpdateAPI,
  reportDocumentDeleteAPI
} from '@/api/oa/reportDocument'

import CreateSections from '@/components/CreateSections'
import WkFileSelect from '@/components/NewCom/WkFile/Select'
import WkFileCell from '@/components/NewCom/WkFile/Cell'
import WkBaseDetailSection from '@/components/WkBaseDetail/WkBaseDetailSection'
import FormAddDialog from './FormAddDialog'
import { createEditor } from '@wangeditor/editor'

import { documentModel } from '../model/report'
import { objDeepCopy } from '../../../../utils'

export default {
  name: 'ReportDocument',
  components: {
    CreateSections,
    WkBaseDetailSection,
    FormAddDialog,
    WkFileSelect,
    WkFileCell
  },
  props: {
    id: [String, Number],
    type: {
      type: Number,
      requiered: true
    },
    status: [String, Number]
  },
  data() {
    return {
      loading: false,
      documentList: {},
      documentFields: [],
      // 弹窗添加
      formAddTitle: '',
      formAddForm: {},
      formAddRules: {},
      formAddFields: [],
      formAddDialogShow: false
    }
  },

  computed: {
    title() {
      if (this.type == 1) {
        return '本周重点孵化达人'
      } else if (this.type == 2) {
        return '本周新签达人'
      } else if (this.type == 3) {
        return '近期热门穿搭'
      }
    },
    dropdownItems() {
      if (this.status == 1) {
        return [{
          label: '编辑',
          command: 'update',
          icon: 'wk wk-icon-modify'
        }, {
          label: '删除',
          command: 'delete',
          icon: 'wk wk-delete'
        }]
      }
    }
  },
  watch: {
    id: {
      handler() {
        this.getDetail()
      },
      immediate: true
    }
  },
  mounted() {
  },

  beforeDestroy() {},
  methods: {
    /**
     * 获取基础信息
     */
    getDetail() {
      this.loading = true
      reportDocumentListQueryAPI(this.id, this.type)
        .then(res => {
          this.loading = false
          const data = res.data || []
          this.documentList = data
          this.documentFields = this.getCommonFieldListValue(data)
        }).catch(() => {
          this.loading = false
        })
    },

    /**
     *常规字段值
     */
    getCommonFieldListValue(data) {
      const resultList = []
      data.forEach(item => {
        const list = []
        documentModel.field.forEach(field => {
          const temp = {}
          temp.label = field.name
          if (field.field === 'content') {
            const value = item[field.field] != '"[]"' ? JSON.parse(item[field.field]) : []
            const editor = createEditor()
            editor.children = value
            // 3. 获取 data
            const html = editor.getHtml() || ''
            temp.value = html
            temp.html = true
          } else {
            temp.value = item[field.field]
          }
          temp.span = 1
          list.push(temp)
        })
        resultList.push(list)
      })
      return resultList
    },

    /**
     * 提交数据
     */
    uploaddocumentList() {
      const param = objDeepCopy(this.formAddForm)
      param.content = JSON.stringify(param.content)
      param.reportId = this.id
      reportDocumentAddOrUpdateAPI(param).then(res => {
        this.$message.success(`${this.formAddTitle}成功`)
        this.formAddDialogShow = false
        this.getDetail()
      }).catch(() => {
        this.formAddDialogShow = false
      })
    },

    /**
     * 编辑删除操作
     */
    commandSelect(command, index) {
      if (command == 'delete') {
        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          reportDocumentDeleteAPI(this.documentList[index].id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.getDetail()
          }).catch(() => {})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
        return
      } else if (command == 'add') {
        this.formAddTitle = '新增信息'
        this.formAddForm = objDeepCopy(documentModel.form)
      } else if (command == 'update') {
        this.formAddTitle = '编辑信息'
        this.formAddForm = objDeepCopy(this.documentList[index])
      }
      this.formAddRules = documentModel.rule
      this.formAddFields = objDeepCopy(documentModel.field)
      this.formAddForm.type = this.type
      this.formAddDialogShow = true
    }

  }
}
</script>

<style lang="scss" scoped>
.base-add-button {
  width: 100%;
  margin: 10px 0;
  padding: 11px 12px;
}

.wk-base-detail-section + .wk-base-detail-section {
  border-top: 1px solid $xr-border-color-base;
}

.create-sections {
  /deep/ .create-sections-content {
    padding: 0 20px;
  }
}

.contract-files {
  width: 80%;
  margin: 20px 0 20px 10px;
}
</style>
